@charset "UTF-8";
@import "base";
.product_content{
  position: relative;
  width: $content_width;
  margin: 0 auto;
  background:#fff;
  .clearfloat{
    clear: both;
  }
  .product_infos{
    width: 1125px;
    background-color: $color_2;
    margin-bottom: 30px;
    padding: 40px 40px 40px 40px;
    min-height: 563px;
    .slide_imgs{
      float: left;
      position: relative;
      .slide_img{
        width: 420px;
        height: 420px;
        margin-bottom: 15px;
        position: relative;
        cursor: crosshair;
        .zoom{
          width: 210px;
          height: 210px;
          position: absolute;
          opacity: 0.3;
          left: 0;
          top: 0;
        }
      }
      .pic_zoom{
        width: 420px;
        height: 420px;
        position: absolute;
        top: -1px;
        left: 460px;
        border: 1px solid $border_c;
        background-color: $color_2;
        z-index: 1;
        overflow: hidden;
        img{
          width: 840px;
          height: 840px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .slide_small{
        width: 420px;
        height: 48px;
        margin: 0 auto;
        .border{
          border: 1px solid $border_d;
          float: left;
          height: 46px;
          cursor:pointer;
          &.btn_left{
            width: 28px;
            .bac_img{
              @include u_image('@@_rel_start/images/products/show/btn_left.png?20151229154423', 13, 26);
              margin-top: 10px;
              margin-left: 7px;
              display: inline-block;
            }
            &.failed{
              .bac_img{
                @include u_image('@@_rel_start/images/products/show/btn_left_unclick.png?20151229154423', 13, 26);
              }
            }
          }
          &.btn_right{
            width: 28px;
            float: right;
            .bac_img{
              @include u_image('@@_rel_start/images/products/show/btn_right.png?20151229154423', 13, 26);
              margin-top: 10px;
              margin-left: 7px;
              display: inline-block;
            }
            &.failed{
              .bac_img{
                @include u_image('@@_rel_start/images/products/show/btn_right_unclick.png?20151229154423', 13, 26);
              }
            }
          }
        }
        .border:hover{
          border: 1px solid $border_d_hover;
        }
        .failed:hover{
          border: 1px solid $border_d;
        }
        .btn_left:hover{
          .bac_img{
            @include u_image('@@_rel_start/images/products/show/btn_left_hover.png?20151229154423', 13, 26);
          }
        }
        .btn_right:hover{
          .bac_img{
            @include u_image('@@_rel_start/images/products/show/btn_right_hover.png?20151229154423', 13, 26);
          }
        }
        .small_imgs{
          width: 360px;
          height: 48px;
          float: left;
          overflow: hidden;
          .imgs{
            min-width: 100%;
            height: 100%;
            position: relative;
            left: 0;
            .img_wrap{
              width: 48px;
              height: 48px;
              float: left;
              margin-left: 20px;
              position: relative;
              cursor:pointer;
              .img_border{
                border: 1px solid $border_d;
                position: absolute;
                left: 0;
                top: 0;
                width: 46px;
                height: 46px;
              }
              &.active{
                .img_border{
                  border: 1px solid $border_d_hover;
                }
              }
            }
          }
        }
      }
    }
    .product_info{
      width: 660px;
      float: left;
      margin-left: 40px;
      position: relative;
      color: $font_color_1;
      .pro_label{
        width: 65px;
        height: 65px;
        position: absolute;
        top: -40px;
        right: -10px;
        color: #ffffff;
        font-size: 13px;
        text-align: center;
        z-index: 666;
        display: inline-block;
        @include u_img(69,36,-130,0);
        //.long{
        //  padding: 18px;
        //  height: 12px;
        //  overflow: hidden;
        //  line-height: 15px;
        //}
        .short{
          margin-top: 6px;
          height: 15px;
          overflow: hidden;
          line-height: 15px;
        }
      }
      .bottom_border{
        border-bottom: 1px solid $border_d;
        &.pro_country{
          width: 100%;
          height: 18px;
          padding: 5px 0 20px 0;
          p{
            float: left;
            margin-right: 8px;
          }
          .name{
            margin-top: 1px;
          }
        }
        &.pro_infos{
          width: 100%;
          padding: 20px 0px 14px 0px;
          font-size: 13px;
          .name{
            color: $font_color_2;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 21px;
          }
          .detail{
            color: $font_color_2;
            font-size: 18px;
            margin-bottom: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 21px;
          }
          .description{
            line-height: 18px;
            max-height: 50px;
            overflow: hidden;
          }
        }
        &.pro_sales_infos{
          width: 100%;
          padding: 20px 0;
          font-size: 13px;
          position: relative;
          p{
            float: left;
          }
          .price{
            width: 100%;
            height: 29px;
            margin-bottom: 21px;
            .name{
              margin-top: 16px;
              margin-right: 61px;
            }
            .number{
              color: $main_color;
              margin-right: 9px;
              font-family: "Arial";
              span{
                font-size: 35px;
              }
            }
            .discount{
              padding: 3px 7px;
              background-color: $main_color;
              color: $color_2;
              margin-top: 11px;
              margin-right: 15px;
            }
            .use_times{
              padding: 3px 7px;
              background-color: $color_1;
              color: $color_2;
              margin-top: 10px;
              margin-right: 15px;
            }
            .reference{
              margin-top: 16px;
              color:#aaaaaa;
            }
            .reference_value{
              margin-top: 17px;
              position: relative;
              padding: 0 2px;
              font-family: "Arial";
              color:#aaaaaa;
              .line{
                width: 100%;
                height: 1px;
                background-color: #aaaaaa;
                position: absolute;
                top: 5px;
                left: 0px;
              }
            }
          }
          .place{
            width: 100%;
            height: 13px;
            margin-bottom: 21px;
            .name{
              margin-right: 48px;
            }
            .detail{
              color:#111111;
            }
            .qrcode_wrap{
              //float: right;
              position: absolute;
              padding-top: 4px;
              top: 57px;
              left: 363px;
              width: 162px;
              height: 35px;
              display: inline-block;
              .hl_red{
                color:#ff0000;
                margin-left: 16px;
                line-height: 30px;
              }
              .icon{
                vertical-align: text-top;
                s{
                  margin-left: 6px;
                  @include u_image('@@_rel_start/images/products/show/qrcode_icon.png?20151229154423',21,21);
                  display: inline-block;
                  vertical-align: middle;
                }
                b{
                  margin-left: 2px;
                  margin-top: 6px;
                  @include u_image('@@_rel_start/images/products/show/qrcode_btn_normal.png?20151229154423',13,7);
                  display: inline-block;
                  vertical-align: middle;
                }
              }
              &.active{
                border: 1px solid #ccc;
                border-bottom: none;
                b{
                  @include u_image('@@_rel_start/images/products/show/qrcode_brn_hover.png?20151229154423',13,7);
                }
              }
            }
          }
          .freight{
            width: 100%;
            height: 13px;
            margin-bottom: 21px;
            .name{
              margin-right: 61px;
            }
            .detail{
              color:#111111;
            }
          }
          .customs{
            width: 100%;
            height: 13px;
            .name{
              margin-right: 61px;
            }
            .detail{
              color: #111111;
              margin-right: 18px;
            }
            .rule{
              color: $color_1;
              border-bottom: 1px solid $color_1;
              &:hover{
                color: $font_theme_color;
                border-bottom: 1px solid $font_theme_color;
              }
            }
          }
          .summary_mbuy{
            position: absolute;
            top: 97px;
            left: 363px;
            z-index: 4;
            width: 162px;
            height: 144px;
            border: 1px solid #ccc;
            border-top: none;
            background: #fff;
            //-moz-box-shadow: 0 0 10px rgba(0,0,0,.12);
            //-webkit-box-shadow: 0 0 10px rgba(0,0,0,.12);
            //box-shadow: 0 0 10px rgba(0,0,0,.12);
            i{
              position: absolute;
              left: 1px;
              top: -6px;
              display: inline-block;
              width: 160px;
              height: 8px;
              background: #fff;
              z-index: 5;
            }
            .qrcode{
              margin-left: 16px;
              img{
                border: 0;
                vertical-align: middle;
                width: 130px;
                height: 130px;
                display: block;
              }
            }
          }
        }
      }
      .pro_values{
        width: 100%;
        font-size: 13px;
        color: $font_color_1;
        margin-top: 20px;
        .color{
          width: 100%;
          .name{
            margin-right: 61px;
            margin-top: 7px;
            float: left;
          }
          .vals{
            width: 572px;
            float: left;
            .val{
              width: 22px;
              height: 22px;
              border: 2px solid $border_c;
              margin-right: 20px;
              margin-bottom: 10px;
              position: relative;
              float: left;
              cursor:pointer;
              color:#111111;
              img{
                width: 22px;
                height: 22px;
              }
              span{
                display: none;
                @include u_img(4, 3, -6, -43);
                position: absolute;
                right: 0;
                top: 0;
              }
              &.active{
                border: 2px solid #4fc3dc;
                span{
                  display: block;
                }
              }
            }
            .val:hover{
              border: 2px solid #4fc3dc;
            }
          }
        }
        .size{
          width: 100%;
          margin-top: 10px;
          .name{
            margin-right: 61px;
            margin-top: 7px;
            float: left;
          }
          .vals{
            width: 572px;
            float: left;
            .val{
              min-width: 4px;
              height: 12px;
              border: 2px solid $border_c;
              padding: 5px 7px;
              margin-right: 20px;
              margin-bottom: 10px;
              position: relative;
              float: left;
              cursor:pointer;
              .product_ico{
                display: none;
                @include u_img(4, 3, -6, -43);
                position: absolute;
                right: 0;
                top: 0;
              }
              &.active{
                border: 2px solid #4fc3dc;
                .product_ico{
                  display: block;
                }
              }
              &.failed{
                color:#cccccc;
                border: 2px solid $border_d;
                background-color: $color_2;
                opacity: 0.8;
              }
            }
            .val:hover{
              border: 2px solid $border_d;
            }
            .failed:hover{
              border: 2px solid $border_d;
            }
          }
        }
        .count{
          width: 100%;
          height: 22px;
          margin-top: 10px;
          margin-bottom: 27px;
          p{
            float: left;
          }
          .beyond_tax_error{
            position: absolute;
            bottom: 70px;
            left: 175px;
            padding: 10px 17px;
            border: 1px solid $border_e;
            .tax_beyond_arrow{
              @include u_image('@@_rel_start/images/products/show/tax_beyond_arrow.png?20151229154423', 6, 8);
              position: absolute;
              left:-6px;
              top:12px;
            }
            label{
              &.error {
                font-size: 13px;
              }
            }
            &.show{
              display: block;
            }
          }
          .name{
            margin-right: 61px;
            margin-top: 5px;
          }
          .minus{
            width: 20px;
            height: 20px;
            border: 1px solid $border_e;
            position: relative;
            cursor:pointer;
            span{
              @include u_image('@@_rel_start/images/products/show/minus.png?20151229154423', 12, 2);
              position: absolute;
              left: 4px;
              top: 9px;
            }
            &.failed{
              background-color: $color_2;
              opacity: 0.8;
              span{
                @include u_image('@@_rel_start/images/products/show/minus_failed.png?20151229154423', 12, 2);
              }
            }
            &.failed:hover{
              background-color: $color_2;
              opacity: 0.8;
              span{
                @include u_image('@@_rel_start/images/products/show/minus_failed.png?20151229154423', 12, 2);
              }
            }
          }
          .minus:hover{
            background-color: #4fc3dc;
            span{
              @include u_image('@@_rel_start/images/products/show/minus_hover.png?20151229154423', 12, 2);
            }
          }
          .num{
            width: 30px;
            height: 10px;
            line-height: 10px;
            border-top: 1px solid $border_e;
            border-bottom: 1px solid $border_e;
            float: left;
            text-align: center;
            padding: 5px 0;
            color: #111111;
          }
          .plus{
            width: 20px;
            height: 20px;
            border: 1px solid $border_e;
            margin-right: 10px;
            position: relative;
            cursor:pointer;
            span{
              @include u_image('@@_rel_start/images/products/show/plus.png?20151229154423', 12, 12);
              position: absolute;
              left: 4px;
              top: 4px;
            }
            &.failed{
              background-color: $color_2;
              opacity: 0.8;
              span{
                @include u_image('@@_rel_start/images/products/show/plus_failed.png?20151229154423', 12, 12);
              }
            }
            &.failed:hover{
              background-color: $color_2;
              opacity: 0.8;
              span{
                @include u_image('@@_rel_start/images/products/show/plus_failed.png?20151229154423', 12, 12);
              }
            }
          }
          .plus:hover{
            background-color: #4fc3dc;
            span{
              @include u_image('@@_rel_start/images/products/show/plus_hover.png?20151229154423', 12, 12);
            }
          }
          .detail{
            color: $font_color_2;
            margin-top: 5px;
          }
        }
      }
      .pro_btn{
        width: 100%;
        p{
          float: left;
          &.purchase{
            white-space:nowrap;
            display: inline;
            width: 76px;
            height: 20px;
            padding: 15px 42px;
            background-color: $main_color;
            color: $color_2;
            font-size: 18px;
            font-weight: bold;
            margin-right: 20px;
            cursor:pointer;
          }
          &.disable{
            background-color: #cccccc;
          }
          &.purchase:hover{
            opacity: 0.9;
          }
          &.add_cart{
            white-space:nowrap;
            display: inline;
            width: 90px;
            height: 18px;
            padding: 14px 34px;
            border: 2px solid $main_color;
            color: $main_color;
            margin-right: 14px;
            font-size: 18px;
            font-weight: bold;
            cursor:pointer;
          }
          &.add_cart:hover{
            background-color: $main_color;
            color: $color_2;
            opacity: 0.9;
          }
          &.sold_out{
            width: 56px;
            height: 16px;
            padding: 16px 52px;
            color: $font_color_2;
            font-size: 18px;
            background-color: $border_d;
          }
        }
      }
    }
  }
  .rec_products{
    width: 260px;
    padding: 1px 0 40px 0;
    background-color: $color_2;
    float: left;
    .title{
      h3{
        position: relative;
        height: 42px;
        line-height: 42px;
        font-size: 20px;
        color: #000;
        text-align: center;
        border-bottom: 2px dotted #dadada;
        &:after{
          position: absolute;
          display: block;
          width: 84px;
          height: 11px;
          content: '';
          background-image: url('@@_rel_start/images/products/show/bgarrow.png?20151229154423');
          background-size: 84px 11px;
          left: 50%;
          margin-left: -42px;
          bottom: -9px;
        }
      }
    }
    .products{
      padding: 28px 18px 0 18px;
      .product{
        margin-bottom: 40px;
        .img_wrap{
          width: 218px;
          height: 218px;
          img{
            &:hover{
              opacity: 0.85;
            }
          }
        }
        .name{
          margin-top: 21px;
          font-size: 16px;
          overflow:hidden;
          white-space:nowrap;
        }
        .detail{
          color:#555555;
          margin-top: 7px;
          font-size: 13px;
          line-height: 17px;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          max-height: 34px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .sale_info{
          margin-top: 15px;
          .price{
            font-size: 18px;
            color: $main_color;
            float: left;
            margin-right: 12px;
          }
          .discount{
            font-size: 14px;
            color: $font_color_1;
            float: left;
            position: relative;
            padding: 0 2px;
            margin-top: 2px;
            span{
              width: 100%;
              height: 1px;
              background-color: #777;
              position: absolute;
              top: 5px;
              left: 0px;
            }
          }
        }
      }
    }
  }
  .product_details{
    width: 910px;
    float: right;
    .show_img{
      @include u_image('@@_rel_start/images/products/show/show.png?20151229154423', 910, 210);
      margin-bottom: 30px;
    }
    .mention_pic{
      width: 910px;
      height: 210px;
      margin-bottom: 30px;
    }
    .content.w911{
      width: 911px;
      height: auto;
      background-color: #fff;
      h3{
        position: relative;
        height: 42px;
        line-height: 42px;
        font-size: 20px;
        color: #000;
        text-align: center;
        border-bottom: 2px dotted #dadada;
        &:after{
          position: absolute;
          display: block;
          width: 84px;
          height: 11px;
          content: '';
          background-image: url('@@_rel_start/images/products/show/bgarrow.png?20151229154423');
          background-size: 84px 11px;
          left: 50%;
          margin-left: -42px;
          bottom: -9px;
        }
        & + h4{
          margin-top: 20px;
        }
      }
      h4{
        padding: 0 12px;
        margin-top: 30px;
        font-size: 16px;
        color: #777;
      }
      h5{
        padding: 0 20px;
        font-size: 13px;
        line-height: 18px;
        margin-top: 12px;
      }
      .description_wrap{
        p{
          img{
            padding-top: 30px;
            margin: 0 auto;
            display: block;
          }
        }
      }
      .operation_img{
        padding: 0 20px;
        font-size: 13px;
        line-height: 18px;
        img{
          margin: 0 auto;
          display: block;
          width: 100%;
        }
      }
      .product_img{
        padding: 0 20px;
        font-size: 13px;
        line-height: 18px;
        img{
          margin: 0 auto;
          display: block;
          width: 580px;
          height: 580px;
        }
      }
      .branch_img{
        padding: 0 ;
        font-size: 13px;
        line-height: 18px;
        width: 870px;
        img{
          margin: 0 auto;
          display: block;
          width: 870px;
        }
      }
    }
    .show_params{
      width: 100%;
      background-color: $color_2;
      .pro_params{
        width: 100%;
        padding: 12px 0 50px 0;
        .title{
          font-size: 20px;
          color: $font_color_2;
          text-align: center;
          padding-bottom: 10px;
          border-bottom: 1px dashed $border_d9;
          position: relative;
          p{
            display: inline-block;
            position: relative;
            .line{
              width: 100%;
              height: 5px;
              position: absolute;
              background-color: $border_d_hover;
              left: 0;
              bottom: -13px;
            }
            .arrow{
              @include u_img(12, 6, -201, -17);
              position: absolute;
              left: 50%;
              bottom: -19px;
              margin-left: -6px;
            }
          }
        }
        .items{
          padding: 0 20px;
          font-size: 16px;
          color: $font_color_1;
          &.brand{
            padding: 22px 19px 22px 36px;
            .brand_ico{
              width: 182px;
              height: 182px;
              border-radius: 182px;
              float: left;
              background-color: white;
              text-align: center;
              img{
                display: inline-block;
                margin-top: 53px;
              }
              .en_name{
                text-align: center;
                font-weight: bold;
                font-size: 20px;
                color: #000;
                margin-top: 71px;
              }
              .cn_name{
                text-align: center;
                font-weight: bold;
                font-size: 18px;
                color: #000;
                margin-top: 12px;
              }
            }
            .brand_info{
              width: 640px;
              padding: 20px 0 20px 33px;
              font-size: 13px;
              color: $font_color_2;
              float: left;
              .name{
                font-size: 22px;
                margin-bottom: 14px;
              }
              .text{
                line-height: 18px;
              }
            }
          }
          &brand_image{
            padding: 0;
          }
          .item_obj{
            margin-top: 21px;
            .name{
              height: 17px;
              border-left: 4px solid $border_d;
              padding-left: 8px;
            }
            .text{
              font-size: 13px;
              color: $font_color_2;
              padding: 14px 12px;
            }
          }
          .item_text{
            margin-top: 24px;
            font-size: 13px;
            color: $font_color_2;
          }
          .item_img{
            margin-top: 22px;
          }
        }
      }
      .buy_title{
        width: 100%;
        text-align: center;
        height: 42px;
        background-color: #dddddd;
        position: relative;
        .bang{
          @include u_img(23, 23, -199, -48);
          position: relative;
          top: 6px;
          margin-right: 6px;
          display: inline-block;
        }
        p{
          display: inline-block;
          margin-top: 12px;
          font-size: 20px;
        }
        .arrow{
          @include u_img(12, 6, -217, -36);
          position: absolute;
          bottom: -6px;
          left: 50%;
          margin-left: -6px;
        }
      }
      .buy_content{
        background-color: $color_2;
        padding: 17px 20px 50px 20px;
        .content_text{
          margin-bottom: 12px;
          display: inline-block;
          .line{
            width: 4px;
            height: 16px;
            background-color: $border_d;
            float: left;
            margin-right: 8px;
          }
          .text{
            list-style: decimal;
            width: 858px;
            float: left;
            font-size: 13px;
            line-height: 18px;
            a{
              color: $font_theme_color;
              text-decoration:underline;
            }
          }
        }
      }
    }
  }
}

//登录样例
.form_input{
  input{
    width: 100%;
    height: 30px;
    border: 1px solid $main_color;
    &#password{
      margin-top: 10px;
    }
  }
  .submit{
    background-color: $main_color;
    color: $color_2;
    margin-top: 80px;
  }
}
label[id$='-error']{
  font-size: 12px;
  color: red;
}
